<template>
  <div>
    <div class="topBtn">
            <div class="sizeBig"><span>工程维护</span></div>
            <div>
              <el-button type="primary"><i class="icon-time"></i> 设置保养时间</el-button>
              <el-button type="primary" @click="repairs"><i class="icon-baoxiu"></i>报修</el-button>
              <el-button type="primary" @click="renew"><i class="icon-huifu"></i>恢复</el-button>
              <el-button type="primary" @click="forbidden"><i class="icon-jinyong"></i> 禁用</el-button>
              <el-button type="primary" @click="addData"><i class="icon-xinzeng"></i>新增</el-button>
              <el-button type="primary" @click="amend"><i class="icon-xiugai"></i>修改</el-button>
              <el-button type="primary" @click="remove"><i class="icon-shanchu"></i>删除</el-button>
            </div> 
        </div>
        <div class="message">
            <p class="character">1.设置产线打印设备的保养周期，保养时间到的话MES系统会自动锁定，保养结束后主管解锁才可继续生产。</p>
            <p class="character">2.如果设备损坏，请及时报修设备，生产计划规则不会排产到设备所在线体。 <span class="skip">查看帮助文档</span></p>
        </div>
         <div class="inputcontent">
            <el-input v-model="search" placeholder="请输入内容" class="inSearch"></el-input>
            <div class="iconSearch"></div>
        </div>
        <div class="tablecontent">
          <Table :reset="reset" v-on:checkData="checkData"></Table>
        </div>
        <div class="block">
            <el-pagination
            :page-sizes="[2]"
            :page-size="1"
            @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
        <el-dialog
          :title="discern==0?'报修密码':'恢复密码'"
          :visible.sync="dialogVisible"
          width="500px"
          >
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" status-icon>
            <el-form-item label="解锁密码：" prop="passWord">
              <el-input v-model="ruleForm.passWord" autocomplete="off" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="resetForm('ruleForm')">取消</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')">确认操作</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

        <el-dialog
          title="新增设备"
          :visible.sync="newAdd"
          width="560px"
          >
          <el-form :model="FormData" :rules="changeRules" ref="FormData" label-width="120px" class="demo-ruleForm" status-icon>
            <!-- <el-form-item label="设备：" prop="deviceID">
              <el-input v-model="FormData.deviceID" style="width:350px"></el-input>
            </el-form-item> -->
            <el-form-item label="设备：" prop="deviceID">
              <el-select v-model="FormData.deviceID" placeholder="请选择活动区域" style="width:350px">
                <el-option v-for="(item,index) in addSelect" :key="index" :label="item.Name" :value="item.DeviceId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="计划名称：" prop="name">
              <el-input v-model="FormData.name" style="width:350px"></el-input>
            </el-form-item>
            <el-form-item label="是否需要停机：" prop="needCloseDown">
              <el-select v-model="FormData.needCloseDown" placeholder="请选择活动区域" style="width:350px">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="保养间隔时间：" prop="mainTimeSpan">
              <el-input v-model="FormData.mainTimeSpan" style="width:350px"></el-input>
            </el-form-item>
            <el-form-item label="计划时间：" prop="time">
              <el-date-picker
                v-model="FormData.time"
                type="daterange"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button @click="resetForm('FormData')">取消</el-button>
              <el-button type="primary" @click="submitAffirm('FormData')">确认</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

        <el-dialog
          title="修改设备"
          :visible.sync="amendChange"
          width="560px"
          >
          <el-form :model="amendData" :rules="changeRulesadd" ref="FormDatas" label-width="120px" class="demo-ruleForm" status-icon>
            <el-form-item label="计划ID：" prop="PlanID">
              <el-input v-model="amendData.PlanId" style="width:350px"></el-input>
            </el-form-item>
            <el-form-item label="设备：" prop="deviceID">
              <el-select v-model="amendData.deviceID" placeholder="请选择活动区域" style="width:350px">
                <el-option v-for="(item,index) in addSelect" :key="index" :label="item.Name" :value="item.DeviceId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="计划名称：" prop="name">
              <el-input v-model="amendData.name" style="width:350px"></el-input>
            </el-form-item>
            <el-form-item label="是否需要停机：" prop="needCloseDown">
              <el-select v-model="amendData.needCloseDown" placeholder="请选择活动区域" style="width:350px">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="保养间隔时间：" prop="mainTimeSpan">
              <el-input v-model="amendData.mainTimeSpan" style="width:350px"></el-input>
            </el-form-item>
            <el-form-item label="计划时间：" prop="time">
              <el-date-picker
                v-model="amendData.time"
                type="daterange"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button @click="resetForm('FormDatas')">取消</el-button>
              <el-button type="primary" @click="changeSubmit('FormDatas')">确认</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
  </div>
</template>

<script>
import Table from './components/upkeepTable'
import  operation from '@/mixins/operation'
import {operate,forbid,getfacilityid,removeData} from '@/api/upkeep'

export default {
  name:'upkeep',
  mixins:[operation],
  data(){
    return{
      module:'upkeep',
      search:'',   //搜索 
      addSelect:'', // 新增的下拉数据
      Tabledata:[],   //数据
      newAdd:false,  //新增的模态框
      amendChange:false,  //修改的模态框
      dialogVisible:false,   // 保修和恢复的弹出框
      type:'',//是否转换
      discern:0,    //0为报修  1为恢复
      ruleForm:{
        passWord:''    //解锁密码密码
      },
      FormData:{
        deviceID:'',   //设备ID
        name:'',     //工序名称
        needCloseDown:'',   //是否需要停机
        mainTimeSpan:'',   //保养间隔时间
        time:'',    //计划时间
      },
      amendData:{
        PlanId:'',   //计划id
        deviceID:'',//设备ID
        name:'',     //工序名称
        needCloseDown:'',   //是否需要停机
        mainTimeSpan:'',   //保养间隔时间
        time:'',    //计划时间
      },
      rules: {
        passWord: [
          { required: true, message: '请输入解锁密码', trigger: 'blur' },
          { min: 1, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
        ]
      },
      changeRules:{
        deviceID:[
          { required: true, message: '请输入设备id', trigger: 'change' },
        ],
        name:[
          { required: true, message: '请输入设备名称', trigger: 'blur' },
        ],
        needCloseDown:[
          { required: true, message: '是否需要停机', trigger: 'change' },
        ],
        mainTimeSpan:[
          { required: true, message: '请输入保养时间间隔', trigger: 'blur' },
        ],
        time:[
          { required: true, message: '请选择维护时间段', trigger: 'blur' },
        ]
      },
      changeRulesadd:{
        PlanId:[
          { required: true, message: '请输入设备id', trigger: 'blur' },
        ],
        deviceID:[
          { required: true, message: '请输入设备id', trigger: 'blur' },
        ],
        name:[
          { required: true, message: '请输入设备名称', trigger: 'blur' },
        ],
        needCloseDown:[
          { required: true, message: '是否需要停机', trigger: 'change' },
        ],
        mainTimeSpan:[
          { required: true, message: '请输入保养时间间隔', trigger: 'blur' },
        ],
        time:[
          { required: true, message: '请选择维护时间段', trigger: 'blur' },
        ]
      }
    }
  },
  components:{
    Table
  },
  methods:{
    remove(){
      if(this.Tabledata.length!==0){
        let arr=''
        this.Tabledata.forEach((el)=>{
          arr+=el.PlanId+','
        })
        let newArr=arr.substr(0,arr.length-1);
         this.$confirm('此操作将删除保养计划, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeData({planID:newArr}).then((res)=>{
            console.log(res)
            this.initialize({keyName:this.search,page:1,pageSize:1})
          }).catch((error)=>{
            console.log(error)
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
          
      }else{
        alert('请勾选需要删除的数据')
      }
    },
    repairs(){
        if(this.Tabledata.length==0){
          alert('请勾选需要报修的设备')
        }else{
          this.discern=0
          this.ruleForm={}
          this.dialogVisible=true
        }
    },
    changeSubmit(amendData){
      if(this.amendData.needCloseDown=="是"){
        this.type=1
      }else if(this.amendData.needCloseDown=="否"){
        this.type=0
      }else if(this.amendData.needCloseDown==1){
          this.type=1
      }else{
        this.type=0
      }
      
      this.$refs[amendData].validate((valid) => {
          if (valid) {
            let start=this.amendData.time[0]
            let end=this.amendData.time[1]
            this.increase({
            planID:this.amendData.PlanId,
            deviceID:this.amendData.deviceID,
            name:this.amendData.name,
            needCloseDown: this.type,
            mainTimeSpan:this.amendData.mainTimeSpan,
            startTime:start,
            endTime:end
            }).then((res)=>{
              console.log(res)
              this.amendChange=false
              this.initialize({keyName:this.search,page:1,pageSize:1})
            }).catch((error)=>{
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        })
      console.log(this.Tabledata)
        
    },
    forbidden(){
      if(this.Tabledata.length==0){
        alert('请勾选需要禁用的设备')
      }else{
        forbid({planID:this.Tabledata[0].PlanId,isEnable:0}).then((res)=>{
          alert(res.Message)
          this.initialize({keyName:this.search,page:1,pageSize:1})
        })
      }
    },
    resetForm(ruleForm){
      this.dialogVisible=false
      this.newAdd=false
      this.amendChange=false
      this.$refs[ruleForm].resetFields()
    },
    renew(){
      if(this.Tabledata.length==0){
          alert('请勾选需要报修的设备')
        }else{
          this.discern=1
          this.ruleForm={}
          this.dialogVisible=true
        }
    },
    checkData(val){
      console.log(val)
      this.Tabledata=val
    },
    submitAffirm(FormData){
      this.$refs[FormData].validate((valid) => {
          if (valid) {
            let start=this.FormData.time[0]
            let end=this.FormData.time[1]
            this.increase({
            deviceID:this.FormData.deviceID,
            name:this.FormData.name,
            needCloseDown:this.FormData.needCloseDown,
            mainTimeSpan:this.FormData.mainTimeSpan,
            startTime:start,
            endTime:end
            }).then((res)=>{
              console.log(res)
              this.newAdd=false
              this.initialize({keyName:this.search,page:1,pageSize:1})
            }).catch((error)=>{
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        })
    },
    amend(){
      if(this.Tabledata.length==1){
        this.amendChange=true
        this.amendData.PlanId=this.Tabledata[0].PlanId
        this.amendData.deviceID=this.Tabledata[0].DeviceId
        this.amendData.name=this.Tabledata[0].Name
        if(this.Tabledata[0].NeedCloseDown==true){
          this.amendData.needCloseDown="是"
        }else{
          this.amendData.needCloseDown="否"
        }
        this.amendData.mainTimeSpan=this.Tabledata[0].MaintTimeSpan
        this.amendData.time=[this.Tabledata[0].StartTime,this.Tabledata[0].EndTime]
        getfacilityid({keyName:'',page:1,pageSize:1000}).then((res)=>{
        this.addSelect=res.Result.Items
      }).catch((error)=>{
        console.log(error)
      })
      if(this.$refs["FormDatas"]!==undefined){
        this.$refs["FormDatas"].resetFields()
      }
      }else{
        alert('请勾选一个需要更改的产品')
      }
    },
    addData(){
      this.newAdd=true
      getfacilityid({keyName:'',page:1,pageSize:1000}).then((res)=>{
        this.addSelect=res.Result.Items
      }).catch((error)=>{
        console.log(error)
      })
      if(this.$refs["FormData"]!==undefined){
        this.$refs["FormData"].resetFields()
      }
    },
    handleCurrentChange(val){
      this.initialize({keyName:this.search,page:val,pageSize:2})
    }
  },
  created(){
    this.initialize({keyName:this.search,page:1,pageSize:2})
  }
}
</script>

<style lang="scss" scoped>
.topBtn{
    height: 60px;
    width: 98%;
    margin: 0 auto;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    .icon-time{
      display: inline-block;
      width: 13px;
      height:14px;
      margin:0 0 2px 0;
      background: url("image/shezhibaoyangshijian.png") no-repeat;
      vertical-align: middle;
    }
    .icon-baoxiu{
      display: inline-block;
      width: 14px;
      height:14px;
      margin:0 3px 2px 0;
      background: url("image/baoxiu.png") no-repeat;
      vertical-align: middle;
    }
    .icon-huifu{
      display: inline-block;
      width: 14px;
      height:14px;
      margin:0 3px 2px 0;
      background: url("image/huifu.png") no-repeat;
      vertical-align: middle;
    }
    .icon-jinyong{
      display: inline-block;
      width: 14px;
      height:14px;
      margin:0 0 2px 0;
      background: url("image/jinyong.png") no-repeat;
      vertical-align: middle;
    }
    .icon-xinzeng{
      display: inline-block;
      width: 14px;
      height:14px;
      margin:0 3px 2px 0;
      background: url("image/xinzeng.png") no-repeat;
      vertical-align: middle;
    }
    .icon-xiugai{
      display: inline-block;
      width: 14px;
      height:14px;
      margin:0 3px 2px 0;
      background: url("image/xiugai.png") no-repeat;
      vertical-align: middle;
    }
    .icon-shanchu{
      display: inline-block;
      width: 14px;
      height:14px;
      margin:0 3px 2px 0;
      background: url("image/shanchu.png") no-repeat;
      vertical-align: middle;
    }
}
.message{
    width:98%;
    margin: 0 auto;
    height:100px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(238,238,238,1);
    font-size:14px;
    .character{
        margin: 20px 0 21px 20px;
        color:#999999;
        .skip{
            color: #0095FF;
            margin-left:10px;
            cursor:pointer; 
        }
    }
}
.inputcontent{
    width:98%;
    margin: 0 auto;
    height: 80px;
    position: relative;
    padding-top:21px;
    box-sizing: border-box; 
    .iconSearch{
        position: absolute;
        left: 277px;
        top:30px;
        width:20px;
        height: 20px;
        background-image: url('./image/搜索.png') ;
        background-repeat: no-repeat;
        cursor:pointer; 
    }
    .inSearch{
        width:308px;
        height:40px;
    }
}
.tablecontent{
  width:98%;
  margin: 0 auto;
}
.block{
    text-align: right;
    margin:28px 20px 0 0; 
}
</style>
